<template>
  <el-dropdown
    ref="dropdownRef"
    placement="bottom-start"
    trigger="click"
    style="width: 100%"
  >
    <el-input v-model="iconValue" style="width: 100%" v-bind="attrs" readonly>
      <template v-if="iconValue" #prepend
        ><el-icon color="grey" size="20">
          <component :is="iconValue"></component> </el-icon
      ></template>
      <template #suffix>
        <span v-if="!attrs.disabled">
          <el-icon
            @click.stop="iconValue = undefined"
            v-if="iconValue"
            style="cursor: pointer"
            ><CircleCloseFilled
          /></el-icon>
          <el-icon v-else><ArrowDown /></el-icon>
        </span>
      </template>
    </el-input>
    <template #dropdown>
      <div class="icon_box">
        <div
          class="icon_box_item"
          v-for="(item, index) in iconList"
          :key="index"
        >
          <div class="icon_type">{{ item.type }}</div>
          <div class="icon_list">
            <div
              v-for="(icon, idx) in item.list"
              :key="idx"
              :class="getIconClass(icon, idx, item.list)"
              @click="handleSelectIcon(icon)"
              :style="{
                borderColor: iconValue === icon ? primaryColor : 'gainsboro',
              }"
            >
              <el-icon
                :color="iconValue === icon ? primaryColor : 'grey'"
                size="20"
              >
                <component :is="icon"></component>
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </template>
  </el-dropdown>
</template>

<script setup>
import iconList from '@/config/icon.js'
const attrs = useAttrs()
const iconValue = defineModel()
const primaryColor = inject('primaryColor')
// 获取icon样式
const getIconClass = (itm, idx, list) => {
  let iconClass = 'icon_list_item'
  if (idx === list.length - 1) {
    iconClass += ' icon_list_item_last'
  }
  if (itm === iconValue.value) {
    iconClass += ' icon_list_item_active'
  }
  return iconClass
}

const dropdownRef = ref()
const handleSelectIcon = (icon) => {
  iconValue.value = icon
  dropdownRef.value.handleClose()
}
</script>

<style lang="scss" scoped>
.icon_box {
  width: 500px;
  max-height: 500px;
  .icon_type {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .icon_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    &_item {
      margin: 4px;
      padding: 5px 10px;
      border: 1px solid gainsboro;
      border-radius: 6px;
      cursor: pointer;
      &_last {
        margin-right: auto;
      }
    }
    &_item:hover {
      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.24);
    }
  }
}
</style>
